<template>
	<view class="container flex-column flex-space-between font-14px font-color-999">
		<view class="one flex-center">
			<view class="img-box">
				<image class="my-img" :src="info.imgUrl"></image>
			</view>
		</view>
		<view class="two flex-column flex-center ">
			<text class="border-bottom item">设备型号：{{info.typeNumber}}</text>
			<text class="border-bottom item">设备配置：{{info.configuration}}</text>
			<text class="border-bottom item">设备机身号：{{info.fuselageNuber}}</text>

			<text class="border-bottom item">墨水溶剂型号：{{info.inkTankTypeNumber}}</text>
			<text class="border-bottom item" style="color: #09BB07;">设备状态：{{info.state}}</text>
			<view class="date-box flex-column flex-center font-13px">
				<text>安装日期：{{info.installDate}}</text>
				<text>上次维护：{{info.lastMaintenanceTime}}</text>
				<text style="color:#CECECE;">维护专员 | {{info.maintainPeople}}</text>
			</view>
		</view>
		<view class="three flex-column flex-center">
			<text class="border-bottom item">所属公司：{{info.subordinateCompany}}</text>
			<text class="border-bottom item">客户联系人：{{info.customer}}</text>
			<text class="border-bottom item">客户联系方式：{{info.customerContact}}</text>
			<text class="detailed-address">客户详细地址：{{info.customerDetailedAddress}}</text>
		</view>
		<view class="four flex-row flex-center">
			<image class="my-img" style="width: 40rpx; height: 44rpx; margin-right: 20rpx;" src="../../../../static/icon/engineer_home/u977.png"></image>
			<text class="font-16px">工作记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					imgUrl: "../../../../static/u145.png",
					typeNumber: '伟迪捷-大字符喷码机-2120',
					configuration: '自动AI型',
					fuselageNuber: 0,
					inkTankTypeNumber: '伟迪捷 201-0001-730 普通溶剂',
					state: '正常运行',
					installDate: '2020-9-17',
					lastMaintenanceTime: '2020-9-17',
					maintainPeople: '王超',
					subordinateCompany: '****有限公司',
					customer: "张三",
					customerContact: '12345678912',
					customerDetailedAddress: '**市 **县 **镇'
				}
			};
		},
		methods: {

		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #E6E6E6;
		height: 1800rpx;

		.one {
			height: 584rpx;

			.img-box {
				height: 480rpx;
				width: 480rpx;
			}
		}

		.item {
			text-align: center;
			width: 90%;
			height: 86rpx;
			line-height: 86rpx;
		}

		.two {
			margin-top: 10rpx;
			height: 584rpx;

			.date-box {
				height: 140rpx;
			}

		}

		.three {
			height: 464rpx;

			.detailed-address {
				width: 90%;
				height: 206rpx;
				margin-top: 30rpx;
			}
		}

		.four {
			border: 2rpx solid #ADADAD;
			border-radius: 10rpx;
			width: 50%;
			height: 88rpx;
			margin-bottom: 20rpx;
			color: #000000;
		}

	}

	.one,
	.two,
	.three,
	.four {
		background-color: #FFFFFF;
		width: 100%;
	}
</style>
